<template>
  <div>
    <a-form ref="eventRef" :model="eventState" name="event-form">
      <a-form-item
        name="事件等级"
        label="事件等级"
        :rules="[
          {
            required: true,
            message: '请选择事件等级!',
          },
        ]"
      >
        <a-select
          ref="select"
          v-model:value="eventState.事件等级"
          style="width: 90px"
          :options="levels"
          :field-names="{ label: 'value', value: 'key' }"
        ></a-select>
      </a-form-item>
      <a-form-item
        name="事件类型"
        label="事件类型"
        :rules="[
          {
            required: true,
            message: '请选择事件类型!',
          },
        ]"
      >
        <a-select
          ref="select"
          v-model:value="eventState.事件类型"
          style="width: 130px"
          :options="types"
          :field-names="{ label: 'value', value: 'value' }"
        ></a-select>
      </a-form-item>
      <a-form-item
        name="事件编号"
        label="事件编号"
        :rules="[
          {
            required: true,
            message: '请输入事件编号!',
          },
        ]"
      >
        <a-input v-model:value="eventState.事件编号" />
      </a-form-item>
      <a-form-item
        name="发生地点"
        label="发生地点"
        :rules="[
          {
            required: true,
            message: '请输入发生地点!',
          },
        ]"
      >
        <a-input v-model:value="eventState.发生地点" />
      </a-form-item>
      <a-form-item
        name="发生时间"
        label="发生时间"
        :rules="[
          {
            required: true,
            message: '请选择发生时间!',
          },
        ]"
      >
        <!-- 需要修改成日历选择器 -->
        <a-date-picker v-model:value="eventState.发生时间" show-time />
      </a-form-item>
      <a-form-item
        name="处理状态"
        label="处理状态"
        :rules="[
          {
            required: true,
            message: '请选择处理状态!',
          },
        ]"
      >
        <!-- 需要修改成下拉选择框 -->
        <a-select
          ref="select"
          v-model:value="eventState.处理状态"
          style="width: 90px"
          :options="status"
          :field-names="{ label: 'value', value: 'key' }"
        ></a-select>
      </a-form-item>
      <a-form-item
        name="车牌号"
        label="车牌号"
        :rules="[
          {
            required: true,
            message: '请输入车牌号!',
          },
        ]"
      >
        <a-input v-model:value="eventState.车牌号" />
      </a-form-item>
      <a-form-item
        name="驾驶员"
        label="驾驶员"
        :rules="[
          {
            required: true,
            message: '请输入驾驶员姓名!',
          },
        ]"
      >
        <a-input v-model:value="eventState.驾驶员" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, toRaw } from 'vue'
import { Point } from '@/utils/Point.js'
let eventState = reactive({
  事件等级: '',
  事件类型: '',
  事件编号: '',
  发生地点: '',
  发生时间: '',
  处理状态: '',
  车牌号: '',
  驾驶员: '',
})
let status = [
  { key: '0', value: '未处理' },
  { key: '1', value: '已忽略' },
  { key: '2', value: '已归档' },
]
let levels = [
  { key: '0', value: '轻微事件' },
  { key: '1', value: '较小事件' },
  { key: '2', value: '小事件' },
  { key: '3', value: '一般事件' },
  { key: '4', value: '大事件' },
  { key: '5', value: '重大事件' },
  { key: '6', value: '特大事件' },
]
let types = [
  { key: '0', value: '刮擦' },
  { key: '1', value: '碰撞' },
  { key: '2', value: '拥堵' },
  { key: '3', value: '碾压' },
  { key: '4', value: '失火' },
  { key: '5', value: '翻车' },
  { key: '6', value: '其他' },
]
let service = { docName: 'smartRoad', layerId: 2 }
const add = (point, docLayer) => {
  const obj = toRaw(eventState)
  let arr = []
  console.log(obj)
  for (const i in obj) {
    if (i == '发生时间') {
      arr.push({
        key: i,
        value: obj[i].format('YYYY-MM-DD HH:mm:ss'),
        type: 'string',
      })
    } else if (i == '事件等级' || i == '处理状态') {
      arr.push({ key: i, value: obj[i], type: 'short' })
    } else if (i == 'mpLayer') {
      arr.push({ key: i, value: obj[i], type: 'long' })
    } else {
      arr.push({ key: i, value: obj[i], type: 'string' })
    }
  }
  Point.add({
    position: toRaw(point).value,
    attr: arr,
    service,
    docLayer: docLayer,
  })
}
defineExpose({
  add,
})
</script>

<style></style>
